<template>
  <div>
    <h1>计算属性的完整写法</h1>
    <h2>今年的年龄 {{ age }} <input type="text" v-model.number="age" /></h2>
    <h2>
      <!-- 语法是get就是直接用nextAge就可以，不用.get 用了没报错，但是没渲染出数据 -->
      明年的年龄 {{ nextAge }}
      <!-- 双向数据绑定 绑定计算属性 -> 给计算属性赋值 -> 完整写法就要用set -->
      <input type="text" v-model.number="nextAge" />
    </h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 20,
    };
  },
  computed: {
    // nextAge() {
    //   return this.age + 1;
    // },
    // 计算属性完整写法，是个对象，对象里要提供get和set get还是和简写一样
    nextAge: {
      get() {
        return this.age + 1;
      },
      // set就是用于设置的，改值后会触发set 参数val能拿到我们改变的值
      // 因为计算属性是依赖于数据项 依赖于age 我们想改变age 就用逻辑去更改 今年的年龄=明年的-1
      set(val) {
        // 在这个例子中 nextAge指的的是明年的年龄 val打印出来我们设置的明年的年龄
        // 因为计算属性本质是依赖项计算得出 去修改依赖项 怎么改根据业务逻辑来
        console.log(val);
        this.age = val - 1;
      },
    },
  },
};
</script>

<style>
</style>